import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/markLine';
import $ from 'jquery';
import moment from 'moment';



class EchartCurve extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      inter2: 1,
      times: [],
      lineData: [],
      lineData1: [],
      lineData2: [],
      lineData3: [],
      lineData4: []
    }
    this.refreshOption = this.refreshOption.bind(this);
  }

  componentDidMount() {

    const times = [];
    const lineData = [];
    const lineData1 = [];
    const lineData2 = [];
    const lineData3 = [];
    const lineData4 = [];

    const beginDay = new Date().getTime();
    for (let i = 96; i > 0; i -= 1) {
      times.push(moment(new Date(beginDay - 1000 * 60 * i)).format('HH:mm'));




      let value = 800 + Math.random() * 30;
      lineData.push(value);

      value = 350 + Math.random() * 60;
      lineData1.push(value);

      value = 20 + Math.random() * 5;
      lineData2.push(value);

      value = 2 + Math.random() * 1;
      lineData3.push(value);

      value = 600 + Math.random() * 40;
      lineData4.push(value);

    }

    this.setState({
      times,
      lineData,
      lineData1,
      lineData2,
      lineData3,
      lineData4
    });

    const { id } = this.props;
    const that = this;
    echarts.dispose(document.getElementById(id));
    const myChart = echarts.init(document.getElementById(id));
    that.loadChart(myChart);
    that.refreshOption(myChart);

    const inter21 = setInterval(function rand() {
      that.refreshOption(myChart);
    }, 2000);

    this.setState({ inter2: inter21 });
  }

  componentWillUnmount() {
    const { inter2 } = this.state;
    clearInterval(inter2);
    $(window).unbind('resize', chartIndexAvgResizing)
  }

  refreshOption(myChart) {

    const { times, lineData, lineData1, lineData2, lineData3, lineData4 } = this.state;

    const beginDay = new Date().getTime();
    times.push(moment(new Date(beginDay)).format('HH:mm'));
    times.shift();
    let value = 800 + Math.random() * 30;
    lineData.push(value);
    lineData.shift();
    value = 350 + Math.random() * 60;
    lineData1.push(value);
    lineData1.shift();
    value = 20 + Math.random() * 5;
    lineData2.push(value);
    lineData2.shift();
    value = 2 + Math.random() * 1;
    lineData3.push(value);
    lineData3.shift();
    value = 600 + Math.random() * 40;
    lineData4.push(value);
    lineData4.shift();


    const dataOption = {
      xAxis: {
        data: times
      },
      series: [{
        name: '供冷功率',
        data: lineData
      },
      {
        name: '供热功率',
        data: lineData4
      },
      {
        name: '发电功率',
        data: lineData1
      }
        ,
      {
        name: '燃气量',
        data: lineData2
      }
        ,
      {
        name: '热水量',
        data: lineData3
      }
      ]
    };
    myChart.setOption(dataOption);

  }

  loadChart(myChart) {
    $(window).unbind('resize', chartIndexAvgResizing)
    var option = getChartOption();
    myChart.setOption(option);
    $(window).bind('resize', { chart: myChart }, chartIndexAvgResizing)
  }

  render() {
    const { id } = this.props;
    return (
      
      <div id={id} style={{ width: '100%', minHeight: '350px'  }}/>
      
    );
  }
}

export default EchartCurve;


function chartIndexAvgResizing(e) {
  if (e.data.chart) {
    e.data.chart.resize();
  } else {
    return;
  }
}

function getChartOption() {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#9ABCC3'
        }
      }
    },
    legend: {
      data: ['供冷功率', '供热功率', '发电功率', '燃气量', '热水量']
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [

      {
        margin: 200,
        type: 'value',
        name: '功率',
        axisLabel: {
          formatter: '{value} kW'
        }
      },
      {
        type: 'value',
        name: '燃气量',
        position: 'right',
        axisLabel: {
          formatter: '{value}  m³'
        }
      }
      , {
        type: 'value',
        name: '热水',
        position: 'right',
        offset: 60,
        axisLabel: {
          formatter: '{value}  t'
        }
      } 
      
    ],
    grid: {
      left: 35,
      right:35
  },
    series: [
      {
        name: '供冷功率',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#5BC0EB'
        },
        data: []
      },
      {
        name: '供热功率',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#E55934'
        },
        data: []
      },
      {
        name: '发电功率',
        type: 'line',
        smooth: true,
        itemStyle: {
          color: '#9BC53D'
        },
        data: []
      },
      {
        name: '燃气量',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        itemStyle: {
          color: '#69306D'
        },
        data: []
      },
      {
        name: '热水量',
        type: 'line',
        yAxisIndex: 2,
        smooth: true,
        itemStyle: {
          color: '#FCBF49'
        },
        data: []
      }
    ]
  };
  return option;
}